import { html, css, LitElement, adoptStyles } from 'lit';
import { SignalWatcher, signal } from '@lit-labs/signals';
import { customElement } from 'lit/decorators.js';
import { Effect } from 'effect';

const count = signal(0);
function increment() {
  return Effect.sync(() => count.set(count.get() + 1));
}

@customElement('app-root')
export class AppRoot extends SignalWatcher(LitElement) {
  static styles = css`
    .content {
      display: flex;
      min-height: 100vh;
      line-height: 1.1;
      text-align: center;
      flex-direction: column;
      justify-content: center;
    }

    .content h1 {
      font-size: 3.6rem;
      font-weight: 700;
    }

    .content p {
      font-size: 1.2rem;
      font-weight: 400;
      opacity: 0.5;
    }
  `;

  render() {
    adoptStyles(this.shadowRoot!, [AppRoot.styles]);
    return html`
      <div class="content">
        <h1>Rsbuild with Lit</h1>
        <p>Start building amazing things with Rsbuild.</p>
        <div>
          <p>The count is ${count.get()}</p>
          <button @click=${this.onClick}>Increment</button>
        </div>
      </div>
    `;
  }
  private onClick() {
    increment().pipe(Effect.runSync);
  }
}
